<template>
	<view class="content">
		<view class="section-2">
			<view class="section-body">
				<text class="iconfont icon-xiangmu"></text>项目：{{project_name}}
			</view>
		</view>
		<view class="section-5">
			<view class="section-body">
				<view class="video-tab">
					<view class="label">
						当日作业统计
					</view>
				</view>
				<view class="people-total">
					<view class="item" @click="go('/pages/statistics/project/place/list/index?project_id=' + project_id + '&type=在场')">
						<view class="left">在场人员</view>
						<view class="mid">{{analysis.present_total || 0}}</view>
						<view class="left">人</view>
						<view class="right">
							<text class="iconfont icon-xiangyou1"></text>
						</view>
					</view>
					<view class="item" @click="go('/pages/statistics/project/place/list/index?project_id=' + project_id + '&type=到岗')">
						<view class="left">到岗人员</view>
						<view class="mid">{{analysis.come_total || 0}}</view>
						<view class="left">人</view>
						<view class="right">
							<text class="iconfont icon-xiangyou1"></text>
						</view>
					</view>
					<view class="item" @click="go('/pages/statistics/safety/ticket/list?project_id=' + project_id)">
						<view class="left">作业票</view>
						<view class="mid">{{analysis.ticket_total || 0}}</view>
						<view class="left">张</view>
						<view class="right">
							<text class="iconfont icon-xiangyou1"></text>
						</view>
					</view>
					<view class="item" @click="go('/pages/statistics/project/place/risk/index?project_id=' + project_id)">
						<view class="left">风险</view>
						<view class="mid">{{analysis.risk_total || 0}}</view>
						<view class="left">个</view>
						<view class="right">
							<text class="iconfont icon-xiangyou1"></text>
						</view>
					</view>
				</view>
				<view class="video-tab">
					<view class="label">
						视频
					</view>
					<view class="buttons">
						<view @click="curVideo = item"
						 :class="[`button ${curVideo.content === item.content ? 'button__active' : ''}`, `${item.type === '布控球' ? 'button-ball' : ''}`]" v-for="item in videoList" :key="item.id">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="video">
					<video  v-for="item in videoList" v-if="curVideo.id === item.id" :src="item.content" class="myVideo"  page-gesture autoplay></video>
					<!-- <view class="audio">
						<text v-if="!audioOff" @click="audioOff = true" class="iconfont icon-sound-max"></text>
						<text v-if="audioOff" @click="audioOff = false" class="iconfont icon-mute"></text>
					</view>
					<view class="full">
						<text class="iconfont icon-quanping"></text>
					</view> -->
				</view>
				<view class="video-tab">
					<view class="label">
						微气象
					</view>
				</view>
				<view class="wrapper">
					<view class="title"><text class="iconfont icon-neirongjiance"></text>今日实测</view>
					<view class="value">
						<view class="report">
							<view class="report-item">
								<view class="top">温度（℃）</view>
								<view class="bottom">{{info.temper}}°</view>
							</view>
							<view class="report-item">
								<view class="top">湿度（%）</view>
								<view class="bottom">{{info.humidity}}</view>
							</view>
							<view class="report-item">
								<view class="top">风速（m/s）</view>
								<view class="bottom">{{info.speed}}</view>
							</view>
						</view>
					</view>
					<view class="device">
						<view>
							<view class="device-title">扬尘数据</view>
							<view class="device-info">
								<text>PM2.5: {{isJSON(info.dust_info) ? parseInt(JSON.parse(info.dust_info)['PM2.5']) + 'ug/m3' : '-'}}</text><br>
								<text>PM10: {{isJSON(info.dust_info) ? parseInt(JSON.parse(info.dust_info)['PM10']) + 'ug/m3' : '-'}}</text>
							</view>
						</view>
						<view>
							<view class="device-title">噪音</view>
							<view class="device-info">
								<text>NOICE: {{info.noice || '-'}}db</text>
							</view>
						</view>
						
					</view>
					<!-- <view class="device">
						
					</view> -->
				</view>
				<view class="video-tab">
					<view class="label">
						感知层
					</view>
				</view>
				<view class="perception">
					<view class="item" @click="zamessage()">
						<view class="top">安装设备</view>
						<view class="bottom">{{azsb}}<text>个</text></view>
					</view>
					<view class="item" @click="tcmessage()">
						<view class="top">异常设备</view>
						<view class="bottom">{{ycsb}}<text>个</text></view>
					</view>
					<view class="item" @click="wornning()">
						<view class="top">告警数量</view>
						<view class="bottom">{{gjsb}}<text>个</text></view>
					</view>
					<view class="item" @click="bqmessage()">
						<view class="top">布控球个数</view>
						<view class="bottom">{{ballTotal}}<text>个</text></view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { siteInfoApi } from '@/api/build.js';
	import { analysisDetailApi, buildAnalysisApi,analysisApi } from '@/api/statistics.js'
	import { listApi, weatherApi } from '@/api/jydk.js'
	export default {
		data() {
			return {
				azsb:'',//安装设备
				ycsb:'',//异常设备
				gjsb:'',//告警数量
				curVideo: {},
				videoList: [],
				audioOff: false,
				timeStamp: '',
				// peopleList: [],
				// weatherList: [],
				project_name: '',
				project_id: '',
				info: {},
				ballTotal: 0,
				analysis: {
					come_total: 0,
					present_total: 0,
					risk_total: 0,
					ticket_total: 0
				}
			}
		},
		methods: {
			async analysisApi(){
				let j = await analysisApi({
					project_id: this.project_id
				})
				if(j.data.code == 1){
					this.azsb = j.data.data.facility_total
					this.ycsb = j.data.data.facility_total_warn
					this.gjsb = j.data.data.alarm_total
				}
			},
			wornning(){
				uni.navigateTo({
					url:'wornning?project_id='+ this.project_id
				})
			},
			zamessage(){
				uni.navigateTo({
					url:'message?project_id='+ this.project_id + '&type=1'
				})
			},
			tcmessage(){
				uni.navigateTo({
					url:'message?project_id='+ this.project_id + '&type=2'
				})
			},
			bqmessage(){
				uni.navigateTo({
					url:'message?project_id='+ this.project_id + '&type=3'
				})
			},
			go(url) {
				uni.navigateTo({
					url,
				})
			},
			isJSON(str) {
			    if (typeof str == 'string') {
			        try {
			            var obj=JSON.parse(str);
			            if(typeof obj == 'object' && obj ){
			                return true;
			            }else{
			                return false;
			            }
			
			        } catch(e) {
			            return false;
			        }
			    }
			}
			// formatDate(timeStamp) {
			// 	if (!timeStamp) {
			// 		return ''
			// 	}
			// 	const date =new Date(timeStamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			// 	const Y = date.getFullYear() +'-';
			//     const M = (date.getMonth() +1 <10 ?'0' + (date.getMonth() +1) : date.getMonth() +1) +'-';
			//     const D = date.getDate();
			//    	return Y + M + D;  
			// },
			// async fetchPeople2() {
			// 	uni.showLoading({title: '加载中...'});
			// 	const {data} = await listApi({pageSize: 1, pageNum: 10, time: this.timeStamp})
			// 	uni.hideLoading();
			// 	this.peopleList = data.datas;
			// },
			// async fetchPeople() {
			// 	uni.showLoading({title: '加载中...'});
			// 	const {data} = await analysisDetailApi({project_id: this.id })
			// 	uni.hideLoading();
			// 	this.peopleList = data.data;
			// },
			
			// async fetchWether() {
			// 	uni.showLoading({title: '加载中...'});
			// 	const {data} = await weatherApi({pageSize: 1, pageNum: 10, time: this.timeStamp})
			// 	uni.hideLoading();
			// 	this.weatherList = data;
			// },
			
		},
		onReady() {
			// this.timeStamp = this.formatDate((new Date()).valueOf());
			// this.fetchPeople();
			// this.fetchWether();
		},
		onLoad(data) {
			this.project_name = data.name
			this.project_id = data.id
			this.analysisApi()
			buildAnalysisApi({project_id: this.project_id}).then(res => {
				const { data } = res;
				const info = data.data;
				this.analysis = info;

			})
			siteInfoApi({project_id: this.project_id}).then(res => {
				const { data } = res;
				const { info } = data.data;
				this.info = data.data;
			
				if (Array.isArray(info)) {
					let video = info.filter(item => item.type === '摄像头')
					let ball = info.filter(item => item.type === '布控球')
					this.ballTotal = ball.length;
					this.videoList = video.concat(ball);
					this.curVideo = this.videoList[0] || {};
				} else {
					this.videoList = [];
				}
			})
			// if (data.name.indexOf('青龙山') !== -1) {
			// 	this.videoList = [
			// 		{name: '北门球机', id: 1, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_1_1?expire=1676637974&id=416334894766653440&t=fb270881debce6d90f8ddf1347146ecad7600c23a277497a1616b56e228301d7&ev=100'},
			// 		{name: '北门', id: 2, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_2_1?expire=1676638040&id=416335172611010560&t=79ee4c0a54cafa4c8305b27545f2b38ad33a6871f8e9c6de2bc74da51238b4f6&ev=100'},
			// 		{name: '项目部停车场', id: 3, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_3_1?expire=1676638076&id=416335322506690560&t=58f1741fd7ea9ead10a3c7ac088482ff058da4c0bed9ce20dec37fa0fe96630c&ev=100'},
			// 		{name: '西北角球机', id: 4, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_4_1?expire=1676638107&id=416335453532921856&t=7a8d912d949602d1bfd6ec766fd91cc467e9c0cbf204db0c9c2ca71b23884271&ev=100'},
			// 		{name: '东南球机', id: 5, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_5_1?expire=1676638132&id=416335557497782272&t=ad92eba7c6e81a38f5aa54d1d37e412b82570ae6dc9297fdec1b0d1e4d5b1c65&ev=100'},
			// 		{name: '西面球机', id: 6, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_6_1?expire=1676638152&id=416335644199886848&t=10c5bc1bc679606edf47bd7142f0a7ebfce0ea708cc9b4d621bd313d7b6be5ce&ev=100'},
			// 		{name: '西南球机', id: 7, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_7_1?expire=1676638184&id=416335776533450752&t=633e5eff95b3901fe9be4bb0bb01c4b6d79ab77c864145ae4fafe5646dec7249&ev=100'},
			// 		{name: '东南2球机', id: 8, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_8_1?expire=1676638205&id=416335865624690688&t=66845a3eadd510715126e1679ed520ff7443088c3b203f1798332f8baeff924d&ev=100'},
			// 		{name: '东面球机', id: 9, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_9_1?expire=1676638229&id=416335964293636096&t=bcc2847be209887487f00c788797d57d25e666a29fc4004cb6e693f093d5d1c8&ev=100'},
			// 	];
			// 	this.curVideo = this.videoList[0];
				
			// } else {
			// 	this.videoList = [
			// 		{name: '南岸1', id: 1, url: 'rtmp://58.215.235.4:1957/live/southVideo1'},
			// 		{name: '北岸1', id: 2, url: 'rtmp://58.215.235.4:1957/live/northVideo1'},
			// 	];
			// 	this.curVideo = this.videoList[0];
			// }
		}
	}
</script>
<style>
	.myVideo{
		width: 100vw;
		height: 300px;
	}
</style>
<style lang="scss" scoped>
	.content{
		.section-2{
			width: 100%;
			background-color: #2e5efe;
			.section-body{
				width: 100%;
				box-sizing: border-box;
				background-color: #fff;
				font-size: 26rpx;
				color: #95c4fa;
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				line-height: 30rpx;
				padding: 0 40rpx;
				padding-top: 40rpx;
				padding-bottom: 10rpx;
				.icon-xiangmu{
					font-size: 26rpx;
					margin-right: 15rpx;
					color: #95c4fa;
				}
			};
		}
		.section-5{
			.people-total{
				box-sizing: border-box;
				padding: 0 40rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 8rpx;
				.item{
					width: 323rpx;
					height: 92rpx;
					background-color: #1534ce;
					box-shadow: 0rpx 13rpx 35rpx 0rpx 
						rgba(60, 90, 214, 0.42);
					border-radius: 35rpx;
					margin-bottom: 22rpx;
					line-height: 92rpx;
					box-sizing: border-box;
					padding-left: 35rpx;
					padding-right: 35rpx;
					.left{
						float: left;
						font-size: 26rpx;
						color: #95c4fa;
					}
					.mid{
						float: left;
						font-weight: bold;
						font-size: 50rpx;
						color: #fff;
						margin: 0 10rpx;
						position: relative;
						top: -6rpx;
					}
					.left{
						float: left;
						font-size: 26rpx;
						color: #95c4fa;
					}
					.right{
						float: right;
						
						.iconfont{
							font-size: 32rpx;
						}
						color: #fff;
					}
				}
			}
			.perception{
				box-sizing: border-box;
				padding: 0 40rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding-bottom: 50rpx;
				.item{
					width: 155rpx;
					height: 155rpx;
					background-color: #1534ce;
					box-shadow: 0rpx 13rpx 35rpx 0rpx 
						rgba(60, 90, 214, 0.42);
					border-radius: 35rpx;
					.top{
						width: 100%;
						padding-top: 25rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 26rpx;
						color: #95c4fa;
						text-align: center;
					}
					.bottom{
						width: 100%;
						text-align: center;
						font-size: 58rpx;
						color: #ffffff;
						font-weight: bold;
						text{
							font-size: 26rpx;
							color: #95c4fa;
							font-weight: normal;
						}
					}
				}
			}
			.video-tab{
				width: 670rpx;
				margin-left: 40rpx;
				margin-bottom: 22rpx;
				@include clear();
				.label{
					display: inline-block;
					float: left;
					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					line-height: 48rpx;
					letter-spacing: 0rpx;
					color: #3b3c40;
					border-bottom: 3rpx solid #95c4fa;
				}
				.buttons{
					float: left;
					width: 100%;
					.button{
						padding: 0 20rpx;
						height: 48rpx;
						background-color: #395cf5;
						border-radius: 20rpx;
						float: left;
						line-height: 48rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffffff;
						transition: 0.3s ease;
						margin-right: 13rpx;
						margin-top: 22rpx;
					}
					.button-ball{
						background: #00bcce;
					}
					.button__active{
						background-color: #1534ce;
					}
				}
			}
			.video{
				width: 100%;
				// height: 420rpx;
				// background-color: #000;
				position: relative;
				margin-bottom: 30rpx;
				.audio{
					position: absolute;
					right: 40rpx;
					top: 25rpx;
					z-index: 10;
					.iconfont{
						font-size: 48rpx;
						color: #fff;
					}
				}
				.full{
					position: absolute;
					right: 40rpx;
					bottom: 25rpx;
					z-index: 10;
					.iconfont{
						font-size: 48rpx;
						color: #fff;
					}
				}
			}
			.wrapper{
				width: calc(750rpx - 80rpx);
				margin-left: 40rpx;
				border-radius: 35rpx;
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
				box-sizing: border-box;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				padding: 28rpx 40rpx;
				margin-bottom: 24rpx;
				.title {
					width: 100%;
					height: 30rpx;
					line-height: 30rpx;
					border-bottom: solid 3rpx #f2f2f0;
					font-size: 26rpx;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
					padding-bottom: 28rpx;
					.iconfont{
						font-size: 26rpx;
						color: #1534ce;
						margin-right: 10rpx;
					}
					view {
						float: right;
						font-size: 26rpx;
						color: #8497ac;
						font-weight: normal;
						.iconfont{
							font-size: 26rpx;
							margin-right: 5rpx;
						}
					}
				}
				.device{
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-top: 15rpx;
					padding-bottom: 10rpx;
					.device-title{
						font-size: 20rpx;
						padding-bottom: 10rpx;
						color: #8497ac;
					}
					.device-info{
						@include clear();
						text{
							font-size: 20rpx;
							color: #1534ce;
							display: inline-block;
							float: left;
							text-align: left;
							&:last-child{
								float: right;
								text-align: right;
							}
						}
					}
				}
				.value {
					width: 100%;
					padding-top: 28rpx;
					padding-bottom: 28rpx;
					border-bottom: solid 3rpx #f2f2f0;
					
					.report{
						width: 100%;
						@include clear();
						
						.report-item{
							width: 33%;
							float: left;
							text-align: center;
							.top{
								width: 100%;
								font-size: 20rpx;
								color: #9b9b9b;
							}
							.bottom{
								font-size: 20rpx;
								color: #1534ce;
								font-weight: bold;
								padding-top: 10rpx;
							}
							
						}
					}
					.small{
						.report-item{
							width: 25%;
						}
					}
					.record{
						width: 100%;
						@include clear();
						margin-bottom: 25rpx;
						.left{
							width: 100%;
							float: left;
							font-size: 26rpx;
							line-height: 36rpx;
							color: #3b3c40;
							margin-bottom: 10rpx;
						}
						
						.log{
							width: 100%;
							line-height: 28rpx;
							font-size: 20rpx;
							color: #3b3c40;
						}
						&:last-child{
							margin-bottom: 0;
						}
					}
				}
				
				
				
			}
		}
		.section-0{
			width: 100%;
			background-color: #fff;
			margin-top: 50rpx;
			.section-body{
				width: 100%;
				padding-left: 40rpx;
				height: 90rpx;
				padding-right: 40rpx;
				background-color: #1534ce;
				background-size: cover;
				background-repeat: no-repeat;
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				overflow: hidden;
				box-sizing: border-box;
				.temp{
					display: inline-block;
					height: 90rpx;
					line-height: 90rpx;
					float: right;
					font-size: 26rpx;
					color: #94c4fa;
					text-align: right;
					text{
						float: right;
						font-size: 58rpx;
						color: #ffdc00;
						margin-left: 8rpx;
					}
				}
				
				.project-name{
					float: left;
					display: inline-block;
					margin-top: 24rpx;
					width: 50%;
					height: 42rpx;
					font-size: 26rpx;
					font-weight: light;
					font-stretch: normal;
					line-height: 42rpx;
					letter-spacing: 0rpx;
					color: #ffffff;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					
					.iconfont{
						font-weight: normal;
						font-size: 26rpx;
						margin-right: 20rpx;
					}
				}
				
			}
		}
	}
</style>
